<!--
 * @Descripttion: 
 * @Author: voanit
 * @Date: 2022-06-29 11:08:59
 * @LastEditors: voanit
 * @LastEditTime: 2022-06-29 15:33:21
-->
<template>
  <div>
    御剑乘风来,除魔天地间!===vue3===watch==={{ obj.count }}
    <button @click="btn">按钮</button>
  </div>
</template>
<script>
import { handleError, reactive, watch } from 'vue'
export default {
  name: '',
  setup () {
    const obj = reactive({
      count: 10
    })

    const btn = () => {
      obj.count += 5
    }

    /* 
    V2:
    // watch:{
    //   obj(newVal,oldVal){

    //   }
    // }

     watch:{
      obj:{
        handler(){},
        deep:true,
        immediate:true
      }
    }
    
    */

    // 监听响应式对象 watch(对象,()=>{})
    // watch(obj, (newVal) => {
    //   console.log(newVal.count, 111);
    // })


    // 监听响应式对象中的属性 watch(对象,()=>{})
    watch(() => obj.count, (newVal) => {  // 注意：此次监听不会触发
      // console.log(111);
    })
    return { obj, btn }
  }
}
</script>
<style lang='less'  scoped>
</style>